#{extends 'main.html' /}
#{set title:'Password Recovery' /}

<div class="loginHolder"><div class="loginHelper">
<img src="/public/images/ss.png" alt="smartsoft"/>
<div id="login">
	
	<form method="post" action="@{Security.recoverPassword()}">
		<h1>Password recovery</h1>
	<label>Please enter a new password:</label>
	<input type="password" name="pass1" id="pass1" onKeyUp="checkPasses()" />

	<label>Please verify the password:</label>
	<input type="password" name="pass2" id="pass2" onKeyUp="checkPasses()"/>
	<br/>	<br/>
	<span id="match" style="color:green ; display:none">Passwords Match<br></span>
	<input type="hidden" name="username" value="${user.name}"/>
	<input type="submit"  id="key" value="submit"  />
	</form>
</div>
</div></div>
<script type="text/javascript">

function checkPasses()
{
	var p1=$('#pass1').val();
	var p2=$('#pass2').val();

	if(p1=="" || p2=="")
	{
		$('#key').attr('disabled', true);
		$('#match').hide();

	}
	else
	if(p1!=p2)
	{
		$('#key').attr('disabled', true);
		$('#match').hide();

	}
	else
	if(p1=p2)
	{
		$('#key').removeAttr('disabled');
		$('#match').show();
	}
}

</script>

